<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

<body>
  <!-- 过滤器:
  语法：
     1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:{}}
     2.使用过滤器: {{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
  备注:
    1,过滤器也可以接收额外参数、多个过滤器也可以串联
    2，并没有改变原本的数据，是产生新的对应的数据
   -->

  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 计算属性实现 -->
    <h3>现在是:{{fmtTime}}</h3>
    <!-- methods实现 -->
    <h3>现在是:{{getFmtTime()}}</h3>
    <!-- 过滤器实现 -->
    <h3>现在是:{{time | timeFormater}}</h3>
    <!-- 过滤器传参 -->
    <h3>现在是:{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h3>
    <h3 :x="msg | mySlice">尚硅谷</h3>
  </div>

  <div id="root2">
    <h2>{{msg | mySlice }}</h2>
  </div>
</body>

<script type="text/javascript">
  //全局过滤器
  Vue.filter('mySlice', function(value) {
    return value.slice(0, 4)
  })

  new Vue({
    el: '#root',
    data: {
      time: 1663901146738,   //时间戳
      msg: '你好,尚硅谷'
    },
    computed: {
      fmtTime() {
        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
      }
    },
    methods: {
      getFmtTime() {
        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
      }
    },
    //局部过滤器
    filters: {
      timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
        console.log('@', value);
        return dayjs(this.time).format(str)
      },

    }
  })

  new Vue({
    el: '#root2',
    data: {
      msg: 'hello,atguigu!'
    }
  })
</script>

</html>